<template>
  <view class="product-card-horizontal" @click="$emit('click')">
    <!-- 左侧商品图片 -->
    <view class="product-image-container">
      <image 
        class="product-image" 
        :src="product.image" 
        mode="aspectFill"
      ></image>
      <!-- 商品标签 -->
      <view class="tags" v-if="product.tags && product.tags.length > 0">
        <view 
          class="tag" 
          v-for="(tag, index) in product.tags" 
          :key="index"
          :style="{backgroundColor: getTagColor(tag)}"
        >
          <text class="tag-text">{{ tag }}</text>
        </view>
      </view>
    </view>
    
    <!-- 右侧商品信息 -->
    <view class="product-info-container">
      <!-- 商品名称 -->
      <view class="product-name">
        <text class="name-text">{{ product.name }}</text>
      </view>
      
      <!-- 商品描述（可选） -->
      <view class="product-desc" v-if="product.desc">
        <text class="desc-text">{{ product.desc }}</text>
      </view>
      
      <!-- 价格区域 -->
      <view class="price-section">
        <!-- 当前价格 -->
        <view class="current-price">
          <text class="price-symbol">¥</text>
          <text class="price-value">{{ product.price }}</text>
        </view>
        <!-- 原价 -->
        <view class="original-price" v-if="product.originalPrice">
          <text>¥{{ product.originalPrice }}</text>
        </view>
      </view>
      
      <!-- 销量和评价 -->
      <view class="product-stats">
        <view class="stat-item">
          <uni-icons type="shop" size="14" color="#999"></uni-icons>
          <text class="stat-text">销量 {{ product.sales || 0 }}</text>
        </view>
        <view class="stat-item">
          <uni-icons type="star" size="14" color="#999"></uni-icons>
          <text class="stat-text">评价 {{ product.rating || '0.0' }}</text>
        </view>
      </view>
      
      <!-- 操作区域 -->
      <view class="action-area">
        <button 
          class="cart-btn" 
          @click.stop="addToCart"
        >
          <uni-icons type="plus" size="16" color="#fff"></uni-icons>
          <text>加入购物车</text>
        </button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  product: {
    type: Object,
    required: true,
    default: () => ({
      id: '',
      name: '',
      desc: '',
      price: '0.00',
      originalPrice: '',
      image: '',
      sales: 0,
      rating: '0.0',
      tags: []
    })
  }
})

const emit = defineEmits(['click'])

// 标签颜色
const getTagColor = (tag) => {
  const colorMap = {
    '热销': '#F44336',
    '新品': '#4CAF50',
    '特惠': '#FF9800',
    '推荐': '#2196F3',
    '限量': '#9C27B0'
  }
  return colorMap[tag] || '#FF8C00'
}

// 加入购物车
const addToCart = () => {
  uni.showToast({
    title: '已加入购物车',
    icon: 'success'
  })
  // 实际项目中这里应该调用加入购物车的API
}
</script>

<style lang="scss" scoped>

.product-card-horizontal {
  display: flex;
  margin-bottom: 30rpx;
  background-color: $white-bg;
  border-radius: 16rpx;
  overflow: hidden;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  
  .product-image-container {
    position: relative;
    width: 240rpx;
    height: 240rpx;
    flex-shrink: 0;
    
    .product-image {
      width: 100%;
      height: 100%;
    }
    
    .tags {
      position: absolute;
      top: 10rpx;
      left: 10rpx;
      display: flex;
      flex-wrap: wrap;
      
      .tag {
        padding: 4rpx 12rpx;
        margin-right: 10rpx;
        margin-bottom: 10rpx;
        border-radius: 4rpx;
        
        .tag-text {
          font-size: $font-size-20rpx;
          color: $text-color-inverse;
        }
      }
    }
  }
  
  .product-info-container {
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 20rpx;
    min-width: 0;
    
    .product-name {
      margin-bottom: 10rpx;
      
      .name-text {
        font-size: $font-size-28rpx;
        color: $text-color;
        font-weight: bold;
        @include text-ellipsis(2);
        line-height: 1.4;
      }
    }
    
    .product-desc {
      margin-bottom: 15rpx;
      
      .desc-text {
        font-size: $font-size-24rpx;
        color: $text-color-666;
        @include text-ellipsis(1);
      }
    }
    
    .price-section {
      display: flex;
      align-items: flex-end;
      margin-bottom: 15rpx;
      
      .current-price {
        color: $primary-color;
        font-weight: bold;
        
        .price-symbol {
          font-size: $font-size-24rpx;
        }
        
        .price-value {
          font-size: $font-size-32rpx;
        }
      }
      
      .original-price {
        font-size: $font-size-24rpx;
        color: $text-color-666;
        text-decoration: line-through;
        margin-left: 10rpx;
      }
    }
    
    .product-stats {
      display: flex;
      margin-bottom: 15rpx;
      
      .stat-item {
        display: flex;
        align-items: center;
        margin-right: 20rpx;
        
        .stat-text {
          font-size: $font-size-22rpx;
          color: $text-color-666;
          margin-left: 6rpx;
        }
      }
    }
    
    .action-area {
      margin-top: auto;
      display: flex;
      justify-content: flex-end;
      
      .cart-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        height: 60rpx;
        line-height: 60rpx;
        padding: 0 20rpx;
        background-color: $primary-color;
        border-radius: 30rpx;
        font-size: $font-size-24rpx;
        color: $text-color-inverse;
        
        text {
          margin-left: 6rpx;
        }
      }
    }
  }
}
</style>